<template>
  <div>
    <h1>Home</h1>
    <div>
      <button @click="$router.back()">返回</button>
      <button @click="$router.forward()">前进</button>
      <button @click="$router.go(2)">222</button>
    </div>
    <router-link :to="{name:'movie'}">电影</router-link><br>
    <router-link :to="{name:'music', params:{id:'1',time:'5min'} }">老歌</router-link><br>
    <router-link :to="{name:'music', params:{id:'2',time:'4min'} }">经典歌曲</router-link><br>
    <router-link :to="{name:'music', params:{id:'3',time:undefined} }">流行音乐</router-link><br>
    <router-link :to="{name:'games', query:{tit:'王者荣耀',version:'2016'} }">游戏1</router-link><br>
    <router-link :to="{name:'games', query:{tit:'CF',version:'2012'} }">游戏2</router-link>
    <div>
      <button @click="showSubHtml">html学科</button>
      <button @click="showSubCss">css学科</button>
      <button @click="showSubJs">js学科</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'Home',
    methods:{
      showSubHtml(){
        this.$router.push('/home/subject?t=easy&sub=Html')
      },
      showSubCss(){
        this.$router.push({name:'subject',query:{t:'middle',sub:'Css'}})
      },
      showSubJs(){
        this.$router.push({name:'subject',params:{t:'nan',sub:'Js'}})
      }
    },
    mounted(){
        console.log('*****mounted');
    },
    beforeDestroy(){
        console.log('*****beforeDestroy');
    }
}
</script>

<style>

</style>